<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Bouncing ball</title>
</head>
<body>
<canvas id="canvas" style="display:block;margin: 0 auto;border: 1px solid black">
</canvas>
<script>
    var ball={x:712,y:100,r:20,g:3,vx:-4,vy:0,color:'yellow'} //定义球的初始值g：加速度，vx:x轴方向的速度，vy:y轴方向的速度
    window.onload=function(){
        var canvas=document.getElementById('canvas')
        canvas.width=1024;
        canvas.height=768;
        var context=canvas.getContext('2d') //环境
        setInterval(function(){
            render(context)
            update()
        },50)
    }
    function render(cxt){
        cxt.clearRect(0,0,cxt.canvas.width,cxt.canvas.height)
        cxt.beginPath()
        cxt.arc(ball.x,ball.y,ball.r,0,2*Math.PI)
        cxt.fillStyle=ball.color
        cxt.fill()   //填充
    }
    function update(){
        ball.x+=ball.vx
        ball.y+=ball.vy
        ball.vy+=ball.g
        if(ball.y>=768-ball.r){
            ball.y=768-ball.r
            ball.vy=-ball.vy*0.8  //到达底部弹起来，*0.5有个缓冲的效果
        }
    }
</script>
</body>
</html>